﻿<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>

		<!-- CSS
		================================================== -->
		<!-- Fontawesome Icon font -->
        <link rel="stylesheet" href="../css/font-awesome.min.css">
		<!-- Twitter Bootstrap css -->
        <link rel="stylesheet" href="../css/bootstrap.min.css">
		<!-- jquery.fancybox  -->
        <link rel="stylesheet" href="../css/jquery.fancybox.css">
		<!-- animate -->
        <link rel="stylesheet" href="../css/animate.css">
		<!-- Main Stylesheet -->
        <link rel="stylesheet" href="../css/main.css">function
		<!-- media-queries -->
        <link rel="stylesheet" href="../css/media-queries.css">

		<!-- Modernizer Script for old Browsers -->
        <script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
		<section id="works" class="works clearfix">
			<div class="container">
				<div class="row">
				
					<div class="sec-title text-center">
						<h2>工具</h2>
						<div class="devider"><i class="fa fa-heart-o fa-lg"></i></div>
					</div>
					
					<div class="sec-sub-title text-center">
						<!-- <p>介绍</p> -->
					</div>
					
					<div class="work-filter wow fadeInRight animated" data-wow-duration="500ms">
						<ul class="text-center">
							<li><a href="javascript:;" data-filter="all" class="active filter">所有</a></li>
							<li><a href="javascript:;" data-filter=".color" class="filter">颜色</a></li>
							<li><a href="javascript:;" data-filter=".logo" class="filter">Logo</a></li>
							<li><a href="javascript:;" data-filter=".html5" class="filter">HTML5插件库</a></li>
							<li><a href="javascript:;" data-filter=".other" class="filter">办公</a></li>
						</ul>
					</div>
					
				</div>
			</div>
			<style>
				.project-wrapper img{width:400px ;height:300px ;}
			</style>
			<div class="project-wrapper" id="wrapper">
			
				
				
			</div>

		</section>
<script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279624779'%3E%3C/span%3E%3Cscript src='https://s4.cnzz.com/z_stat.php%3Fid%3D1279624779%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script>
</body>
</html>
<script src="../js/jquery-1.11.1.min.js"></script>
		<!-- Single Page Nav -->
        <script src="../js/jquery.singlePageNav.min.js"></script>
		<!-- Twitter Bootstrap -->
        <script src="../js/bootstrap.min.js"></script>
		<!-- jquery.fancybox.pack -->
        <script src="../js/jquery.fancybox.pack.js"></script>
		<!-- jquery.mixitup.min -->
        <script src="../js/jquery.mixitup.min.js"></script>
		<!-- jquery.parallax -->
        <script src="../js/jquery.parallax-1.1.3.js"></script>
		<!-- jquery.countTo -->
        <script src="../js/jquery-countTo.js"></script>
		<!-- jquery.appear -->
        <script src="../js/jquery.appear.js"></script>
		<!-- Contact form validation -->
		<script src="../js/jquery.form.js"></script>
		<script src="../js/jquery.validate.min.js"></script>
		<!-- jquery easing -->
        <script src="../js/jquery.easing.min.js"></script>
		<!-- jquery easing -->
        <script src="../js/wow.min.js"></script>
		<script>
			var wow = new WOW ({
				boxClass:     'wow',      // animated element css class (default is wow)
				animateClass: 'animated', // animation css class (default is animated)
				offset:       120,          // distance to the element when triggering the animation (default is 0)
				mobile:       false,       // trigger animations on mobile devices (default is true)
				live:         true        // act on asynchronously loaded content (default is true)
			  }
			);
			wow.init();


			var  kang  = document.getElementById('wrapper');

			let html

let $name2  = [
{title:"520设计网",text:"520设计网 国内取色网站,很强大",class:"color",href:"https://www.sj520.cn/tools/jianbian/",img:"1"},
{title:"uigradients ",text:"在线调色网站",class:"color",href:"https://uigradients.com/#EasyMed",img:"2"},
{title:"trianglify",text:"免费背景生成器，低多边形背景，超酷炫在线生成 颜色大小可调、",class:"color",href:"https://trianglify.io/",img:"3"},
{title:"colours",text:"随机颜色 找适合 找灵感 找色彩必备",class:"color",href:"http://colours.neilorangepeel.com/",img:"4"},

{title:"Logo神器",text:"强大的logo生成网站",class:"logo",href:"https://www.logosc.cn/so/"},
{title:"钙网",text:"免费的LOGO在线设计制作工具",class:"logo",href:"http://www.uugai.com/logoa/biaozhi.php?number=dw-5-332"},
{title:"emblemmatic",text:"在线轻松生成上百个富有设计感的LOGO",class:"logo",href:"http://emblemmatic.org/markmaker/#/"},

{title:"阿里矢量图标库",text:"阿里官方矢量图标库",class:"html5",href:"iconfont：https://www.iconfont.cn/"},
{title:"jq之家 ",text:"jq,html5,css3插件库",class:"html5",href:"http://www.htmleaf.com/"},
{title:"codepen ",text:"全球最知名的前端代码交流网站,可以在线编辑调试",class:"html5",href:"https://codepen.io/"},

{title:"qrcode-monkey ",text:"定制个人二维码",class:"other",href:"https://www.qrcode-monkey.com/ "},
{title:"officeplus",text:"office官方免费素材库!",class:"other",href:"http://www.officeplus.cn/Template/Home.shtml"},
 

]
		
		for (let index = 0; index < $name2.length; index++) {

			let img = index + 1;

			const 	text 	= $name2[index].text,
			 		title 	= $name2[index].title,
			 		href 	= $name2[index].href,
			 		// img 	= $name2[index].img,
			 		$class	= $name2[index].class;

			
		html  += `<figure class="mix work-item `+$class+`" >
					<img src="img/tool-img/`+(img)+`.jpg" alt="">
					<figcaption class="overlay">
						<a class="fancybox" rel="works" title="此处还没有标题" href="`+href+`" target="_blank"><i class="fa fa-eye fa-lg"></i></a>
						<h4>`+title+`</h4>
						<p>`+text+`</p>
					</figcaption>
				</figure>`
		
		}

		let html2 = html.replace("undefined","");

		wrapper.innerHTML = html2;

		</script> 
		<!-- Custom Functions -->
        <script src="../js/custom.js"></script>